<template>
  <el-card>
    <div class="HeadLable">
      <span v-if="props.goBack" class="goBack" @click="goBackEmployee">
        <el-icon><Back /></el-icon> 返回</span
      >
      <span v-if="props.title" class="title">{{ props.title }}</span>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps } from "vue"
import { useRouter } from "vue-router"

// 全局路由
const router = useRouter()

// 接受数据
const props = defineProps<{
  title: string
  goBack: boolean
}>()

// 返回
const goBackEmployee = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.HeadLable {
  font-size: 16px;
  padding-left: 22px;
  font-weight: 700;
  top: 0px;
  left: 0px;
  opacity: 0;
  animation: opacity 500ms ease-out 800ms forwards;
  .goBack {
    border-right: solid 1px #d8dde3;
    padding-right: 14px;
    margin-right: 14px;
    font-size: 16px;
    &:hover {
      color: var(--primary-color);
    }
    cursor: pointer;
    font-weight: 400;
    img {
      position: relative;
      top: 24px;
      margin-right: 5px;
      width: 18px;
      height: 18px;
      float: left;
    }
  }
  .title {
    color: var(--primary-color);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
    left: 80px;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
</style>
